<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  <title>签到统计表</title> 
  <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css" /> 
  <style>
            body{background-color:#eee;}
            form{padding:5px;}
            img{max-height:200px;}
        </style> 
 </head> 
 <body> 
  <header data-am-widget="header" class="am-header am-header-default"> 
   <h1 class="am-header-title"> <a href="#title-link" class=""> 签到统计表 </a> </h1> 
  </header> 
  <div id="main" style="width:100%;padding:10px;"></div> 
  <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading"> 
   <div class="am-modal-dialog"> 
    <div class="am-modal-hd">
     正在努力运算中，由于数据量过大，所以请耐心等候。。。
    </div> 
    <div class="am-modal-bd"> 
     <span class="am-icon-spinner am-icon-spin"></span> 
    </div> 
   </div> 
  </div> 
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
  <script src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script> 
  <script src="/static/template.js"></script> 
  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> 
  <script>
  
            function getQueryString(name) { 
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
                var r = window.location.search.substr(1).match(reg); 
                if (r != null) return unescape(r[2]); return null; 
            } 
            
            function handleData(data){
                var arrs = {};
                for( i in data){
                    if(arrs[data[i]['studyNumber']] == undefined){
                        arrs[data[i]['studyNumber']] = 1;
                    }else{
                        arrs[data[i]['studyNumber']] ++;
                    }
                }    
                
                var length = 0;
                var r1 = [];
                var r2 = [];
                for(var i in arrs){
                    var t = i;
                    $.ajax({
                        url: '/childrenMessage',
                        type: 'POST',
                        async: false,
                        data: {'styudyNumber': i, 'token': getQueryString("token")},
                        success:function(data){
                            data['message'] = data['message'].replace("，", "\n");
                            t = ("昵称："+data['message']+"\n学号：") + t;
                        }
                    });
                
                    r1[length] = t;
                    r2[length] = arrs[i];
                    length++;
                }
                
                $("#main").css("height", (200*length) + "px");
                
                //排序
                for(var i =0;i<length;i++){
                    for(var j =i;j<length;j++){
                        
                        if(r2[i] > r2[j]){
                            var t = r2[i];
                            r2[i] = r2[j];
                            r2[j] = t;
                            
                            var t = r1[i];
                            r1[i] = r1[j];
                            r1[j] = t;
                        } 
                        
                    }
                }
                
                return [r1, r2];
                
            }
            
            $(document).ready(function(){
                $.AMUI.progress.inc();
               $('#my-modal-loading').modal("open");
               $.post("", {"token": getQueryString("token")}, function(data){
                    data = handleData(data);
                    handle(data);
                    $('#my-modal-loading').modal("close");
                    $.AMUI.progress.done(true);
               });
            });
            
            function handle(obj){
                
                 // 路径配置
                 require.config({
                    paths: {
                        echarts: 'http://echarts.baidu.com/build/dist'
                    }
                 });    
                
                // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                option = {
    title : {
        text: '签到数量表',
        subtext: '数据来自红满堂工作室'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['总体情况']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'value',
            boundaryGap : [0, 0.01]
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : obj[0],
        }
    ],
    series : [
        {
            name:'签到次数',
            type:'bar',
            data: obj[1]
        },
    ]
};
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
                    
            }
            
        </script>  
 </body>
</html>
